<template>
    <view class="container">
        <view class="success-content">
            <view class="success-icon">
                <image
                    src="@/static/images/success.svg"
                    mode="aspectFit"
                    style="width: 160rpx; height: 160rpx"
                />
            </view>
            <view class="success-title">支付成功</view>
            <view class="success-info">
                <view class="info-item">
                    <text class="label">订单金额</text>
                    <text class="value">¥{{ orderInfo.actualAmount?.toFixed(2) }}</text>
                </view>
                <view class="info-item">
                    <text class="label">订单编号</text>
                    <text class="value">{{ orderInfo.orderNo }}</text>
                </view>
                <view class="info-item">
                    <text class="label">支付方式</text>
                    <text class="value">{{ getPayMethodText(orderInfo.payType) }}</text>
                </view>
                <view class="info-item">
                    <text class="label">支付状态</text>
                    <text class="value">{{ getPayStatusText(orderInfo.status) }}</text>
                </view>
            </view>
            <view class="button-group">
                <button class="btn primary" @click="goToOrderDetail">查看订单</button>
                <button class="btn secondary" @click="goToHome">返回首页</button>
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { getByOrderNo } from "@/api/order";
import type { PayMethod } from "@/api/payment/types";

const orderInfo = ref<any>({});

// 支付方式文本
const getPayMethodText = (payType?: number) => {
    switch (payType) {
        case 1:
            return "微信支付";
        case 2:
            return "余额支付";
        case 3:
            return "积分支付";
        case 4:
            return "支付宝";
        default:
            return "未知";
    }
};

// 支付状态文本
const getPayStatusText = (status?: number) => {
    switch (status) {
        case 0:
            return "待支付";
        case 1:
            return "支付中";
        case 2:
            return "支付成功";
        case 3:
            return "支付失败";
        case 4:
            return "已取消";
        case 5:
            return "已完成";
        default:
            return "未知";
    }
};

// 查看订单详情
const goToOrderDetail = () => {
    console.log(orderInfo.value);
    uni.redirectTo({
        url: `/pages/orders/detail?id=${orderInfo.value.id}&orderNo=${orderInfo.value.orderNo}`,
    });
};

// 返回首页
const goToHome = () => {
    uni.switchTab({
        url: "/pages/index/index",
    });
};

// 页面加载
onLoad((options) => {
    if (options.orderNo) {
        // 获取订单信息
        getByOrderNo(options.orderNo).then((res) => {
            if (res.code === 200) {
                orderInfo.value = res.data;
                // 更新订单状态为支付成功
                if (orderInfo.value.id) {
                    const {
                        id,
                        orderNo,
                        userId,
                        deviceId,
                        totalAmount,
                        actualAmount,
                        discountAmount,
                        payType,
                        payTime,
                        outTradeNo,
                        completeTime,
                        cancelTime,
                        cancelReason,
                        remark,
                    } = orderInfo.value;
                }
            }
        });
    }
});
</script>

<style>
.container {
    min-height: 100vh;
    background-color: #f8f8f8;
    padding: 40rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.success-content {
    background-color: #fff;
    border-radius: 20rpx;
    padding: 60rpx 40rpx;
    margin-top: 100rpx;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
}

.success-icon {
    display: flex;
    justify-content: center;
    margin-bottom: 40rpx;
}

.success-icon image {
    width: 160rpx;
    height: 160rpx;
}

.success-title {
    font-size: 40rpx;
    font-weight: 600;
    color: #333;
    text-align: center;
    margin-bottom: 60rpx;
}

.success-info {
    border-top: 1px solid #f0f0f0;
    padding-top: 40rpx;
}

.info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30rpx;
}

.info-item:last-child {
    margin-bottom: 0;
}

.info-item .label {
    font-size: 28rpx;
    color: #666;
}

.info-item .value {
    font-size: 28rpx;
    color: #333;
    font-weight: 500;
}

.button-group {
    margin-top: 60rpx;
    padding: 0 40rpx;
}

.btn {
    width: 100%;
    height: 88rpx;
    line-height: 88rpx;
    text-align: center;
    border-radius: 44rpx;
    font-size: 32rpx;
    margin-bottom: 30rpx;
}

.btn.primary {
    background: linear-gradient(135deg, #ff6b6b, #ff4d4f);
    color: #fff;
    border: none;
}

.btn.secondary {
    background-color: #fff;
    color: #666;
    border: 1px solid #ddd;
}

.btn:last-child {
    margin-bottom: 0;
}
</style>
